<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>意见反馈</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div id="takeoutMain">
      <a-form-model layout="inline" :model="form" :style="'margin-top:0px;'">
        <div>
          <a-form-model-item label="手机号">
            <a-input v-model="form.phoneLike" />
          </a-form-model-item>
          <a-form-model-item label="反馈类型">
            <a-select v-model="form.feedbackType" :style="'width: 120px;'">
              <a-select-option value>全部</a-select-option>
              <a-select-option value="SOFTWARE_PROBLEM">软件问题</a-select-option>
              <a-select-option value="MANAGEMENT_PROBLEM">管理问题</a-select-option>
              <a-select-option value="SUGGESTION">意见建议</a-select-option>
              <a-select-option value="COMPLAINT">投诉</a-select-option>
              <a-select-option value="OTHER">其他</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="反馈时间">
            <a-range-picker @change="onChange">
              <a-icon slot="suffixIcon" type="calendar" />
            </a-range-picker>
          </a-form-model-item>
          <a-form-model-item>
            <a-button type="primary" @click="shipCheck">查询</a-button>
          </a-form-model-item>
        </div>
      </a-form-model>
      <a-table
        :columns="columns"
        :loading="loading"
        :data-source="data"
        :style="'margin-top: 25px;'"
        :pagination="pagination"
        :row-key="record => record.id"
      >
        <span slot="captain" slot-scope="record" :style="'display:flex;align-items:center;'">
          <img
            :src="record.headPic ? record.headPic : defaultAvatar"
            alt
            style="width:50px;height:50px;margin-right:10px;border-radius:50%;"
          />
          <span>{{record.name}}</span>
        </span>
        <template
          slot="feedBackType"
          slot-scope="record"
          :style="'display:flex;align-items:center;'"
        >
          <span v-if="record.type === 'SOFTWARE_PROBLEM'">软件问题</span>
          <span v-else-if="record.type === 'MANAGEMENT_PROBLEM'">管理问题</span>
          <span v-else-if="record.type === 'SUGGESTION'">意见建议</span>
          <span v-else-if="record.type === 'COMPLAINT'">投诉</span>
          <span v-else-if="record.type === 'OTHER'">其它</span>
        </template>
      </a-table>
    </div>
  </div>
</template>
<script>
import { queryFeedbackList } from '@/api/appManage'
import defaultAvatar from '@@/images/defaultAvatar.png'

const columns = [
  {
    title: '序号',
    width: 80,
    customRender: (text, record, index) => {
      return index + 1
    }
  },
  {
    title: '船长',
    key: 'captain',
    scopedSlots: {
      customRender: 'captain'
    }
  },
  {
    title: '船名',
    dataIndex: 'shipName'
  },
  {
    title: '手机号',
    dataIndex: 'phone'
  },
  {
    title: '反馈类型',
    key: 'feedBackType',
    scopedSlots: {
      customRender: 'feedBackType'
    }
  },
  {
    title: '反馈内容',
    dataIndex: 'content',
    width: 260,
    ellipsis: true
  },
  {
    title: '反馈时间',
    dataIndex: 'createTime',
    width: 200
  }
]
export default {
  data () {
    return {
      defaultAvatar,
      form: {
        phoneLike: '', // 手机号
        startDate: '', // 开始日期
        endDate: '', // 结束日期
        feedbackType: '', // 反馈类型
        productSign: 'SHIP_OWNER' // 产品标记类型 SHIP_OWNER(“船长”),DRIVER(“司机”)
      },
      pageNum: 1,
      pageSize: 10,
      loading: true,
      data: [],
      columns,
      pagination: {}
    }
  },
  methods: {
    shipCheck () {
      this.pageNum = 1
      let paramData = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        ...this.form
      }
      //   // console.log(paramData)
      this.queryApp(paramData)
    },
    queryApp (paramData) {
      this.loading = true
      queryFeedbackList(paramData)
        .then(res => {
          // // console.log(res)
          this.data = res.data.list
          let currentPage = this.pageNum
          this.pagination = {
            current: currentPage,
            pageSize: res.data.pageSize,
            total: res.data.total,
            showQuickJumper: false,
            showSizeChanger: true,
            showTotal: total =>
              `共${total}条记录 第${currentPage}/${res.data.pages}页`,
            onChange: pageNum => {
              this.pageNum = pageNum
              let paramData = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                ...this.form
              }
              this.queryApp(paramData)
            },
            onShowSizeChange: (current, size) => {
              this.pageNum = current
              this.pageSize = size
              let paramData = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                ...this.form
              }
              this.queryApp(paramData)
            }
          }
          this.loading = false
        })
        .catch(rs => {})
    },
    onChange (data, dateString) {
      this.form.startDate = dateString[0]
      this.form.endDate = dateString[1]
    }
  },
  mounted () {
    this.queryApp({
      ...this.form,
      pageSize: this.pageSize,
      pageNum: this.pageNum
    })
  }
}
</script>
<style lang="less" scoped>
#takeoutMain {
  padding: 24px;
  margin: 24px;
  background: #fff;
  min-height: 700px;
}
</style>
